<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>安全门</title>
    <link rel="stylesheet" type="text/css" href="css/GateMonitor.css" />
    <script src="js/jquery-3.1.0.js"></script>
    <script src="js/swiper.jquery.min.js"></script>
    <script src="js/GateMonitor.js"></script>
    <script src="js/MonitorAjax.js"></script>

</head>

<body>
    <form id="form1" runat="server">
        <asp:hiddenfield ID="Action" value="gatemonitor" runat="server" />
    </form>

    <div id="maincontent">
        <div class="bgcolor">
            <h2>网图演示图书馆</h2>
            <h2>实时数据展示</h2>
            <div class="choise">
              <p>输入播放速度（切换间隔时间）：<input value="4" id="switchtime" type="text">（单位：秒）<button id="comfire">确定</button></p>
               <!--如果要加入新的统计区域，在这里插入一行p标签输入区域名，一行空div标签即可-->
                <p>图书馆概况统计</p>
                <div></div>
                <p>外借情况统计</p>
                <div></div>
                <p>外借情况统计2</p>
                <div></div>
                <p>到馆统计</p>
                <div></div>
            </div>
        </div>

        <div class="swiper-container">
            <div class="swiper-wrapper">
                <!--一个swiper-slide的div为一个展示屏-->
                <div class="swiper-slide">
                    <h3>图书馆概况统计</h3>
                    <p id="1-1" class="block">图书总册数： <span>990000</span> 册</p>
                    <p id="1-2" class="block">读者总人数： <span>990000</span> 册</p>
                    <p id="1-3" class="block">今年新增册数： <span>990000</span> 册</p>
                    <p id="1-4" class="block">总外借数： <span>990000</span> 册</p>
                    <p id="1-5" class="block">其他数据1： <span>990000</span> 册</p>
                </div>
                <div class="swiper-slide">
                    <h3>外借情况统计</h3>
                    <p id="2-1" class="block">今日外借册数： <span>1000</span> 册</p>
                    <p id="2-2" class="block">今日归还册数： <span>1000</span> 册</p>
                    <p id="2-3" class="block">上月外借册数： <span>1000</span> 册</p>
                    <p id="2-4" class="block">本月外借册数： <span>1000</span> 册</p>
                </div>
                <div class="swiper-slide">
                    <h3>外借情况统计2</h3>
                    <p id="3-1" class="block">今年外借册数： <span>1000</span> 册</p>
                    <p id="3-2" class="block">去年外借册数： <span>1000</span> 册</p>
                    <p id="3-3" class="block">总计外借册数： <span>1000</span> 册</p>
                    <p id="3-4" class="block">其他数据1： <span>1000</span> 册</p>
                    <p id="3-5" class="block">其他数据2： <span>1000</span> 册</p>
                </div>
                <div class="swiper-slide">
                    <h3>到馆统计</h3>
                    <p id="4-1" class="block">今日入馆人数： <span>1000</span> 人</p>
                    <p id="4-2" class="block">今日出馆人数： <span>1000</span> 人</p>
                    <p id="4-3" class="block">今年入馆人数： <span>1000</span> 人</p>
                    <p id="4-4" class="block">其他数据1： <span>1000</span> 人</p>
                </div>
            </div>
        </div>
    </div>

    <div id="container">

    </div>
</body>


</html>
